<template>
	<view class="bgContent">
		<u-navbar title="消息中心" :autoBack="true" :placeholder="true" leftIconColor="#ffffff" :titleStyle="{color: '#ffffff'}" bgColor="#e60000" />
		<view class="contentBox bg-white" @tap="handleToDetail(1)">
            <view class="p-l-20 p-r-20 p-t-20 p-b-20 border-box w-100 flex">
                <view class="img-100 m-r-10">
                    <image class="img" src="@/static/img/index/msg1.png"></image>
                </view>
                <view class="content">
                    <view class="font-18 f-2e flex justify-between">
                        <view class="flex">
                            <text>系统消息</text>
                            <view class="red-box" v-if="totalNum.system">{{totalNum.system}}</view>
                        </view>
                        <text class="f-a7" v-if="systemList[0] && systemList[0].createTime">{{systemList[0].createTime | formatDate}}</text>
                    </view>
                    <view class="font-14 m-t-10 f-96 u-line-1 width-566" v-if="systemList[0] && systemList[0].title">{{systemList[0].title}}</view>
                    <view class="font-14 m-t-10 f-96 u-line-1 width-566" v-else>.....</view>
                </view>
            </view>
		</view>
		<view class="contentBox bg-white" @tap="onlineService">
            <view class="p-l-20 p-r-20 p-t-20 p-b-20 border-box w-100 flex">
                <view class="img-100 m-r-10">
                    <image class="img" src="@/static/img/index/msg2.png"></image>
                </view>
                <view class="content">
                    <view class="font-18 f-2e flex justify-between">
                        <view class="flex">
                            <text>客服消息</text>
                        </view>
                    </view>
                    <view class="font-14 m-t-10 f-96 u-line-1 width-566">.....</view>
                </view>
            </view>
		</view>
		<view class="contentBox bg-white" @tap="handleToDetail(2)">
            <view class="p-l-20 p-r-20 p-t-20 p-b-20 border-box w-100 flex">
                <view class="img-100 m-r-10">
                    <image class="img" src="@/static/img/index/msg1.png"></image>
                </view>
                <view class="content">
                    <view class="font-18 f-2e flex justify-between">
                        <view class="flex">
                            <text v-if="storeList[0] && storeList[0].title">{{storeList[0].title}}</text>
                            <text v-else>店铺消息</text>
                            <view class="red-box" v-if="totalNum.store">{{totalNum.store}}</view>
                        </view>
                        <text class="f-a7" v-if="storeList[0] && storeList[0].createTime">{{storeList[0].createTime | formatDate}}</text>
                    </view>
                    <view class="font-14 m-t-10 f-96 u-line-1 width-566" v-if="storeList[0] && storeList[0].content">{{storeList[0].content}}</view>
                    <view class="font-14 m-t-10 f-96 u-line-1 width-566" v-else>.....</view>
                </view>
            </view>
		</view>
	</view>
</template>

<script>
    import onlineServiceMixin from '@/common/mixins/onlineServiceMixin.js'
    import { getMsgUnread, getMsgUpdate, getMsgStore } from '@/common/api/message.js'
	export default {
		mixins: [
			onlineServiceMixin
		],
		data() {
			return {
				sys: null,
				express: null,
                totalNum: {},
                storeList:[],
                systemList:[],
			}
		},
		filters: {
			formatDate(time) {
				let date = new Date(time);
				let year = date.getFullYear();
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
                console.log(year + "-" + month + "-" + day,"=================-----=")
				return year + "-" + month + "-" + day;
				// return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
			}
		},

		onShow(){
            this.getNumTotal()
		},
		methods: {
            getNumTotal(){
                
			    // 获取未读消息数量
				getMsgUnread().then(res => {
					if(res.code === 200){
						if(res.data){
							this.totalNum = res.data;
						}
					}
				})
                // 店铺消息
                getMsgStore({pageNo:1,pageSize:1}).then(res => {
                    if(res.code === 200){
                        if(res.data){
                            this.storeList = res.data
                        }
                    }
                })
                // 系统消息
                getMsgUpdate({ pageNo:1, pageSize:10, targetId:0, roleType:1 }).then(res => {
                    if(res.code === 200){
                        if(res.data){
                            this.systemList = res.data
                        }
                    }
                })
            },
            handleToDetail(type){
              uni.navigateTo({
                  url: `/pages/my/message/detail?type=${type}`
              })
            }
		}
	}
</script>

<style lang="scss" scoped>
    .bgContent{
        background-color: #F3F3F3 !important;
				min-height: 100vh;
    }
    .contentBox{
        width: calc(100% - 40rpx);
        margin: 20rpx auto;
        border-radius: 10rpx;
    }
    .content{
        width: calc(100% - 180rpx);
    }
    .img-100{
        width: 100rpx;
        height: 100rpx;
    }
    .img{
        width: 100%;
        height: 100%;
        flex-shrink: 0;
    }
	.f-2e {
		color: #2e2e2e;
		line-height: 44rpx;
	}

	.f-96 {
		color: #969696;
	}

	.f-a7 {
		font-size: 26rpx;
		color: #a7aab3;
	}

	.width-566 {
		width: 566rpx;
	}

	.red-box {
		border-radius: 50%;
		background: #e60000;
        height: 40rpx;
        min-width: 40rpx;
        padding: 0 4rpx;
        border-radius: 40rpx;
        text-align: center;
        line-height: 40rpx;
        font-size: 24rpx;
        color: #ffffff;
        margin-left: 10rpx;
	}

	.line-msg {
		border-bottom: 1rpx solid #EDEDED;
		margin: 0 30rpx;
	}
</style>
